<template>
  <div id="app">
    <mt-header title="合作伙伴">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
     	<div class="img_list" style="">
				<ul>
					<li  v-for="(item,index) in this.PartnerDatalist" :key="item">
						<a target="_blank" href="#">
                               <img :src="'http://222.77.181.149:8078'+item.partnerPicture.fullPath">
								<p>{{item.title}}</p>
						</a>
					</li>
				</ul>
			</div>
		
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
import {
		getApiByPartnerData
	} from '../../api/api';
  import {
    Header
  } from 'mint-ui';
  export default {
    components: {
      "mt-header": Header,
    },
  
    data() {
      return {
      	PartnerDatalist: [],
      };
    },
  
    //方法
    methods: {
     	PartnerData() {
				let options = {
					params: {
						isTop: 1,
						currentPage: 1,
						pageSize: 20,
					}
				}
				getApiByPartnerData(options).then((res) => {
					if (res.success === true) {
						this.PartnerDatalist = res.data.data;
					}
				})
			},
    },
    	created() {
			this.PartnerData()
		}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
   //
 
 .tab ul {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -moz-box-align: justify;
    -ms-flex-align: center;
    justify-content: space-between;
    align-content: center;
    background: transparent;
}

.tab li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    box-sizing: border-box;
    display: block;
    position: relative;
}

.tab li a {
    color: #656565;
    padding: 12px 20px;
}

.tab li.active a {
    border-bottom: 2px solid #274493;
}

.tab li.active a {
    color: #274493;
}

.img_list {
    max-width: 640px;
    min-width: 300px;
    margin: 0 auto;
}

.img_list img {
       width: 90px;
    /* height: 60px; */
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    /* border-radius: 50%; */
    text-align: center;
}

.img_list li {
     -webkit-animation:fadeInUp 2s ease 0s 1 both;
    -moz-animation:fadeInUp 2s ease 0s 1 both;
    -o-animation:fadeInUp 2s ease 0s 1 both;
    animation:fadeInUp 2s ease 0s 1 both;
    float: left;
    padding:10px 0 0 0;
    text-align: center;
    width: 33.33%;
}

.img_list li a p {
    color: #242424;
    font-size: 14px;
    text-align: center;
min-height: 38px;
  margin-top:5px;
    margin-bottom: 0;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform:translate3d(0, 100%, 0);
        -moz-transform:translate3d(0, 100%, 0);
        -ms-transform:translate3d(0, 100%, 0);
        -o-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
    }
}
@-moz-keyframes  fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform:translate3d(0, 100%, 0);
        -moz-transform:translate3d(0, 100%, 0);
        -ms-transform:translate3d(0, 100%, 0);
        -o-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
    }
}
@-o-keyframes  fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform:translate3d(0, 100%, 0);
        -moz-transform:translate3d(0, 100%, 0);
        -ms-transform:translate3d(0, 100%, 0);
        -o-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform:translate3d(0, 100%, 0);
        -moz-transform:translate3d(0, 100%, 0);
        -ms-transform:translate3d(0, 100%, 0);
        -o-transform:translate3d(0, 100%, 0);
        transform:translate3d(0, 100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform:none;
        -moz-transform:none;
        -ms-transform:none;
        -o-transform:none;
        transform:none;
    }
}

// .fadeInUp {
//     -webkit-animation-name: fadeInUp;
//     -moz-animation-name: fadeInUp;
//     -o-animation-name: fadeInUp;
//     animation-name: fadeInUp;
// }
.footer{
    font-size: 16px;
    color: #d5d5d5;
    font-weight: 300;
    text-align: center;
    padding:30px 0;
    position: relative;
    -webkit-animation:fadeInUp 2s ease 0s 1 both;
    -moz-animation:fadeInUp 2s ease 0s 1 both;
    -o-animation:fadeInUp 2s ease 0s 1 both;
    animation:fadeInUp 2s ease 0s 1 both;
}
.footer:before{
    content: "";
    border-bottom: 1px solid #f7f8f3;
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    z-index: -1;
}
.footer span{
    background: #fff;
    padding:0 20px;
}
</style>
